﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>机器信息查询</title>
<script src="${pageContext.request.contextPath}/jsp/js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="${pageContext.request.contextPath}/jsp/js/bding_jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/jsp/js/highcharts.js"></script>

<!-- 使用手册，界面两个文本框一个确定按钮
	1. 时间（年月日）和 能源类型   --》 时间下的固定能源 , TimeType () 。
	2. 时间（年月日）和 空  --》 查询时间的能源消耗。TimeData() 。
	3. 空 和 任务名   --》 查询任务名并且分析成本 TaskName () 。 
-->

<script type="text/javascript">
$(document).ready(function() { 
	TimeType ();
	TimeData ();
 	TaskName ();
});

function SelectAll() {
	var selectTime = document.getElementById('selectTime').value;
	var selectTypeName = document.getElementById('selectTypeName').value;
	if(selectTime == "" && selectTypeName != "" ){
		alert('查询任务名并且分析成本');
		TaskName();
	} else if (selectTime != "" && selectTypeName == "" ) {
		alert('查询时间的能源消耗');
		TimeData();
	} else if (selectTime != "" && selectTypeName != "") {
		alert('时间下的固定能源');
		TimeType();
	}
}

function TimeType() {
	var time = document.getElementById('selectTime').value;
	var typeName = document.getElementById('selectTypeName').value;
	var data = ""; 
	if(time =="" && typeName ==""){
		selectTimeType(data);
	} else {
		$.ajax({
			data: { 
				time : time,
				object : typeName,
			},
			dataType : 'json',
			url:'${pageContext.request.contextPath }/machine/selectObject.action',
			success:function(data){
				selectTimeType(data);
			}
		});
	}
}

function TimeData() {
	var time = document.getElementById('selectTime').value;
	var data = ""; 
	if(time ==""){
		selectCostTime(data);
	} else {
		$.ajax({
			data : { time : time },
			dataType : 'json',
			url : '${pageContext.request.contextPath }/machine/costAndMachineTime.action',
			success : function(data){
				selectCostTime(data);
			}
		});
	}
}

//每年每月每天的几个能源消耗在总成本。
function selectCostTime(data) {
	var timeCost = [];
	var listType = [];
	var arr1 = [];
	var time ="";
	if (data == "") {
		arr1 = [
	         ['water',   30.0],
	         ['electricity',       60.8],
	         {
	            name: 'gas',
	            y: 16.3,
	            sliced: true,
	            selected: true
	         },
	         ['natural_gas',    18.5],
	         ['fire',     16.2],
	         ['men',   30.7]
	      ];
	} else {
		timeCost = data.timeCost;
		listType = data.listType;
	    $.each( listType , function(i,item){
	    	arr1.push([listType[i],timeCost[i]]);
		})
	}
	/* var chart = {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false
	};
	var title = {
	   text: '时间段能源总成本'   
	};      
	var tooltip = {
	   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	};
	var plotOptions = {
	   pie: {
	      allowPointSelect: true,
	      cursor: 'pointer',
	      dataLabels: {
	         enabled: true,
	         format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
	         style: {
	            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	         }
	      }
	   }
	};
	var series= [{
	   type: 'pie',
	   name: 'Browser share',
	   data: arr1
	}];     
	var json = {};   
	json.chart = chart; 
	json.title = title;     
	json.tooltip = tooltip;  
	json.series = series;
	json.plotOptions = plotOptions;
	$('#CostTimeHC').highcharts(json);  */
	var chart = new Highcharts.Chart({
		chart: {
			type: 'pie',
			renderTo: 'CostTimeHC'
		},
		title: {
			text: '时间段能源总成本' 
		},
		credits: {		//版权信息
			enabled: false
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		series: [{
			   type: 'pie',
			   name: 'Browser share',
			   data: arr1
		}],
		plotOptions: {
			pie: {
			      allowPointSelect: true,
			      cursor: 'pointer',
			      dataLabels: {
			         enabled: true,
			         format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
			         style: {
			            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
			         }
			      }
			   }
		}
	});
	
}

function selectTimeType(data) { 
	var machineObject = [];
	var xAxises = [];
	var ems = [];
	
	if( data == ""){
		machineObject = [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3];
		ems = '时间查询';
		xAxises = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
	} else {
		machineObject = data.machineObject;
		xAxises = data.xAxis;
		ems = data.ems;
	}
	var chart = new Highcharts.Chart({
		chart: {
			type: 'column',
			renderTo: 'TimeHC',
		},
		title: {
			text: ems
		},
		credits: {		//版权信息
			enabled: false
		},
		xAxis: {
			categories: xAxises,
			crosshairs: true
		},
		yAxis: {
			min: 0,
			title: {
				text: '/吨（t）',
			}
		},
		series: [{		//数据列
			name: ems,
			data: machineObject
		}],
		toolkip: {		//数据提示框
			headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		    footerFormat: '</table>',
		    shared: true,
		    useHTML: true
		}	
	}); 


}

function TaskName() {
	var taskname = document.getElementById('selectTypeName').value;
	var data = ""; 
	if(taskname == ""){
		selectTaskName(data);
	} else {
		$.ajax({
			data: { taskname : taskname},
			url:'${pageContext.request.contextPath }/machine/selectTaskName.action',
			dataType : 'json',
			success:function(data){
				selectTaskName(data);
			}
		});
	}
}

function selectTaskName(data) {
	var type = [];
    var sum = [];
    var taskname = [];
    var arr = [];
    
    if (data == "" ) {
		arr =  [
	         ['water',   45.0],
	         ['electricity',       26.8],
	         {
	            name: 'gas',
	            y: 12.8,
	            sliced: true,
	            selected: true
	         },
	         ['natural_gas',    8.5],
	         ['fire',     6.2],
	         ['men',   0.7]
	      ]
    	taskname = '任务名查询';
    } else {
    	type = data.type;
    	sum = data.sum;
    	taskname = data.taskname;
    	
	    $.each(type,function(i,item){
	    	arr.push([type[i],sum[i]]);
		})
    }
    
	/* var chart = {
	      plotBackgroundColor: null,
	      plotBorderWidth: null,
	      plotShadow: false
	};
	var title = {
	   text: taskname
	};      
	var tooltip = {
	   pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	};
	var plotOptions = {
	   pie: {
	      allowPointSelect: true,
	      cursor: 'pointer',
	      dataLabels: {
	         enabled: true,
	         format: '<b>{point.name}</b>: {point.percentage:.1f} %',
	         style: {
	            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	         }
	      }
	   }
	};
	var series= [{
	   type: 'pie',
	   name: 'Browser share',
	   data: arr
	}];     
	
	var json = {};   
	json.chart = chart; 
	json.title = title;     
	json.tooltip = tooltip;
	json.series = series;
	json.plotOptions = plotOptions;
	$('#taskNameHC').highcharts(json);  */ 
    var chart = new Highcharts.Chart({
		chart: {
			type: 'pie',
			renderTo: 'taskNameHC'
		},
		title: {
			text: taskname
		},
		credits: {		//版权信息
			enabled: false
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		series: [{
			   type: 'pie',
			   name: 'Browser share',
			   data: arr
		}],     
		plotOptions: {
			pie: {
			      allowPointSelect: true,
			      cursor: 'pointer',
			      dataLabels: {
			         enabled: true,
			         format: '<b>{point.name}</b>: {point.percentage:.1f} %',
			         style: {
			            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
			         }
			      }
			   }
		}
	});
}

</script>
</head>
<body>
<div class="row">
<div class="col-md-12">
    <!--breadcrumbs start -->
    <ul class="breadcrumb">
        
    </ul>
<div id = "select" style="width: 1220px; height: 140px; background-color:#D3D3D3; margin: 0 auto;" >
	<div style="height:140px; line-height: 140px;margin-left: 50px; ">
		<span style="font-size: 23px;">时间：</span>
			<input id ="selectTime" type="text" style="width:100px;height:30px;"/>
		<span style="font-size: 23px;">其他：</span>
			&nbsp<input id ="selectTypeName" type="text" name="object" style="width:150px;height:30px;"/>
		&nbsp<input type="button" onclick= "SelectAll()" value="查询"  style="width:150px;height:30px;"/>
		
	</div>
</div>
<div id = "chart" style="background-color:white ;width: 1220px; height: 930px;margin: 0 auto;margin-top: 0.2cm" >
	<div id="taskNameHC" style="width: 550px; height: 400px; float:left; border-style: groove; margin: 20px 30px 30px 20px;"></div>
	<!-- <div id="CostTaskHC" style="width: 550px; height: 400px; float:left; border-style: groove; margin: 20px 30px 30px 20px;"></div> -->
	<div id="CostTimeHC" style="width: 550px; height: 400px; float:left; border-style: groove; margin: 20px 30px 30px 20px;"></div>
	<div id="TimeHC" style="width: 550px; height: 400px; float:left; border-style: groove;margin: 20px 30px 30px 20px;"></div>
</div>
</div>
</div>
</body>
</html>
